<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>原生JS实现购物车结算功能代码</title>
  <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
  <div class="catbox">
    <table id="cartTable">
      <thead>
        <tr>
          <th><label>
              <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
          <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
          <td class="price">5999.88</td>
          <td class="count"><span class="reduce"></span>
            <input class="count-input" type="text" value="1" />
            <span class="add">+</span>
          </td>
          <td class="subtotal">5999.88</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
          <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
          <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
          <td class="price">3888.50</td>
          <td class="count"><span class="reduce"></span>
            <input class="count-input" type="text" value="1" />
            <span class="add">+</span>
          </td>
          <td class="subtotal">3888.50</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
          <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
          <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
          <td class="price">1428.50</td>
          <td class="count"><span class="reduce"></span>
            <input class="count-input" type="text" value="1" />
            <span class="add">+</span>
          </td>
          <td class="subtotal">1428.50</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
          <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
          <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
          <td class="price">640.60</td>
          <td class="count"><span class="reduce"></span>
            <input class="count-input" type="text" value="1" />
            <span class="add">+</span>
          </td>
          <td class="subtotal">640.60</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
      </tbody>
    </table>
    <div class="foot" id="foot">
      <a class="fl" id="deleteAll" href="javascript:;">删除</a>
      <div class="fr closing" onclick="getTotal();">结 算</div>
      <input type="hidden" id="cartTotalPrice" />
      <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
      <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span
          class="arrow down">︾</span></div>
      <div class="selected-view">
        <div id="selectedViewList" class="clearfix">
          <div><img src="../images/1.jpg"><span>取消选择</span></div>
        </div>
        <span class="arrow">◆<span>◆</span></span>
      </div>
    </div>
  </div>
</body>
<script>

  var catbox = document.getElementsByClassName("catbox")[0];
  var checkAll = document.getElementsByClassName("check-all")[0];
  var checkOneList = document.getElementsByClassName("check-one");

  catbox.onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;  //事件源 (触发事件元素)
    console.log(target);
    // debugger;
    if (target.classList.contains("check-all")) {
      checkAllHandler(target);
      getTotal();
    } else if (target.classList.contains("check-one")) {
      // checkOneHandler();
      isAllChecked();
      getTotal();
    } else if (target.className == "add") {
      addHandler(target);
      getTotal();
    } else if (target.className == "reduce") {
      reduceHandler(target);
      getTotal();
    } else if (target.className == "delete") {
      deleteOneHandler(target);
      isAllChecked();
      getTotal();
    } else if (target.id == "deleteAll") {
      deleteAllHandler();
      isAllChecked();
      getTotal();
    }
  }

  function checkAllHandler(target) {
    var status = target.checked;
    for (var i = 0; i < checkOneList.length; i++) {
      var checkOne = checkOneList[i];
      checkOne.checked = status;
    }
  }
  function checkOneHandler() {
    // 1. 假设法
    var flag = true; // 假设全部被选中   => 找到一个未选中的即可推翻假设
    for (var j = 0; j < checkOneList.length; j++) {
      var item = checkOneList[j];
      if (!item.checked) {  //item.checked == false
        flag = false;
        break;
      }
    }
    console.log(flag);
    checkAll.checked = flag;
  }
  function addHandler(target) {
    // a. 输入框  数量 加一
    // var countInp = this.previousElementSibling;
    var countInp = prev(target);  // target => 被点击的元素(加号)
    console.log(countInp);
    var num = countInp.value;  // 取值
    num++;  //自增
    countInp.value = num; //赋值(更新到页面)

    // b.小计更新  =  单价*数量
    // 数量  =>  num
    // 单价  =>  先找单价的元素
    var countTd = parent(target);
    var priceTd = prev(countTd);
    var subtotalTd = next(countTd);

    var price = priceTd.innerText * 1;

    subtotalTd.innerText = (price * num).toFixed(2);

    // c. 减号按钮的 “-”  出现 
    var reduce = prev(countInp);
    console.log(reduce);
    reduce.textContent = "-";
  }
  function reduceHandler(target) {
    // console.log(this,reduce);
    // a. 输入框  数量 减一   （细节要求  数量为1的时候  不再减）
    var countInp = next(target);
    var num = countInp.value;  // 取值

    // c. 减之前  判断  如果数量为1  不能减  
    if (num == 1) {
      return false; //  函数遇到return就停止了 后续的代码不在执行
    }
    num--;  //自减
    // d. 减之后  判断  如果数量为1  减号按钮的 “-” 消失  (2切换到1)
    if (num == 1) {
      target.textContent = "";
    }

    countInp.value = num; //赋值(更新到页面)

    // b.小计更新  =  单价*数量
    // 数量  =>  num
    // 单价  =>  先找单价的元素
    var countTd = parent(target);
    var priceTd = prev(countTd);
    var subtotalTd = next(countTd);

    var price = priceTd.innerText * 1;

    subtotalTd.innerText = (price * num).toFixed(2);
  }
  function deleteOneHandler(target) {
    console.log(target);
    if (confirm("是否删除该商品?")) {
      var tr = parent(parent(target));
      tr.remove();
    }
  }
  function deleteAllHandler() {
    // 遍历所有的单选  => 找到所有选中状态的单选框  删除该行数据
    for (var i = 0; i < checkOneList.length; i++) {
      var checkOne = checkOneList[i];
      if (checkOne.checked) {
        var tr = parent(parent(checkOne));
        console.log(tr);
        tr.remove();
        i--;
      }
    }
  }
  function fnHandler() {

  }

  function parent(ele) {
    return ele.parentElement || ele.parentNode;
  }
  function prev(ele) {
    return ele.previousElementSibling || ele.previousSibling;
  }
  function next(ele) {
    return ele.nextElementSibling || ele.nextSibling;
  }

  function isAllChecked() {
    var flag = true; // 假设全部被选中   => 找到一个未选中的即可推翻假设
    for (var j = 0; j < checkOneList.length; j++) {
      var item = checkOneList[j];
      if (!item.checked) {  //item.checked == false
        flag = false;
        break;
      }
    }
    checkAll.checked = checkOneList.length > 0 ? flag : false;
  }

  // 找到所有单选中 所有为选中状态的商品 累加数量和小计
  function getTotal() {
    var sum = 0;
    var allPrice = 0;
    for (var j = 0; j < checkOneList.length; j++) {
      var checkOne = checkOneList[j];
      if (checkOne.checked) {
        var tr = parent(parent(checkOne));
        // console.log(tr);
        var countInp = tr.getElementsByClassName("count-input")[0];
        var subtotalTd = tr.getElementsByClassName("subtotal")[0];
        var num = countInp.value * 1;
        var subtotal = subtotalTd.textContent * 1;
        // console.log(num,subtotal);

        sum += num;
        allPrice += subtotal;
      }
    }

    console.log(sum, allPrice);
    selectedTotal.textContent = sum;
    priceTotal.textContent = allPrice.toFixed(2);
  }







</script>

</html>